import { SearchProps } from 'antd/es/input';
import styles from '../../assets/css/Doctor/DocList.module.css';
import { Input, message, Pagination, Space, Table } from 'antd';
import { useEffect, useState } from 'react';
import { getDoctorList, getDoctorSerach } from '../../api/Doctor/DocList';

export default function DocList() {
  const { Search } = Input;
  const [searchName, setSearchName] = useState('');

  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(0);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
  });
  const onSearch: SearchProps['onSearch'] = async (value, _e, info) => {
    const data = {
      page: pagination.current,
      size: pagination.pageSize,
      name: searchName,
      department: value
    }
    const res = await getDoctorSerach(data)
    if (res.code === 1) {
      message.success(res.msg)
    } else {
      message.error(res.msg)
    }
    setTotal(res.total);
    setDataSource(res.data);
  };

  const columns = [
    {
      title: '医生姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '所属科室',
      dataIndex: 'department',
      key: 'department',
    },
    {
      title: '医生头像',
      dataIndex: 'head',
      key: 'head',
      render: (text: string, record) => (
        <img
          src={text}
          alt="医生头像"
          style={{ width: '50px', height: '50px', borderRadius: '50%' }}
        />
      ),
    },
    {
      title: '联系方式',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
    },
  ];

  // 获取医生列表数据
  async function DoctorList() {
    const res = await getDoctorList({ page: pagination.current, size: pagination.pageSize });
    setTotal(res.total);
    setDataSource(res.data);
  }

  useEffect(() => {
    DoctorList()
  }, [])
  // 使用 useEffect 监听 pagination 的变化
  useEffect(() => {
    getDoctorList({ page: pagination.current, size: pagination.pageSize })
      .then(res => {
        setDataSource(res.data);
      })
  }, [pagination]); // 添加分页变化作为依赖项

  return (
    <div className={styles.body}>
      <header className={styles.header}>
        <div className={styles.p}>
          医生名称：
          <Input
            value={searchName}
            onChange={(e) => setSearchName(e.target.value)}
            placeholder="请输入查询名称"
            style={{ width: '200px',marginRight:'10px' }}
          />医生科室：
          <Space direction="vertical">
            
            <Search
              placeholder="请输入科室"
              allowClear
              enterButton="查询"
              onSearch={onSearch}
            />
          </Space>
        </div>
      </header>
      <main className={styles.main}>
        <Table
          rowKey={(record) => record.id}
          dataSource={dataSource}
          columns={columns}
          rowClassName={styles.rowClassName} // 设置行的样式
          pagination={false} // 禁用默认分页器
        // pagination={{position: ['bottomLeft'], showSizeChanger: true, showQuickJumper: true}}
        />
        <Pagination
          pageSizeOptions={['5', '10', '15']}
          {...pagination}
          total={total}  // 直接传入 total，而不是通过 pagination 对象
          showTotal={() => `总条数：${total} 条`}
          showSizeChanger
          onShowSizeChange={(_current, pageSize) => {
            setPagination({
              current: 1,
              pageSize,
            });
          }}
          onChange={(page, pageSize) => {
            setPagination({
              current: page,
              pageSize: pageSize || pagination.pageSize,
            });
          }}
        />

      </main>
    </div>
  );
}
